<template>
<div>
  <el-drawer v-model="show" title="订单详情" size="40%" @close="emitValue">
    <el-card class="never">
      <template #header>
        <div class="card-header">
          <span>订单信息</span>
        </div>
      </template>
      <p>订单号: {{ row.no }}</p>
      <p>支付方式: {{ row.payment_method }}</p>
      <p>付款时间: {{ row.paid_time }}</p>
      <p>创建时间: {{ row.update_time }}</p>
    </el-card>
    <el-card class="never">
      <template #header>
        <div class="card-header">
          <span>商品信息</span>
        </div>
      </template>
      <div>
        <div class="layout">
          <img class="photo" :src="goodsPhoto()" alt="">
          <div class="right">
            <div>{{ goodsTitle() }}</div>
            <div>
              <el-tag v-for="item in goodsTag()" :key="item.id"> {{ item.name }} : {{ item.value }} </el-tag>
            </div>
            <div><span class="price">{{ goodsPrice() }}</span> <span>x{{ goodsNum() }}</span></div>
          </div>
        </div>
        <p style="margin-top: 5px">实际付款： <span class="price"> {{ total_price() }}</span></p>
      </div>
    </el-card>
    <el-card class="never">
      <template #header>
        <div class="card-header">
          <span>收货信息</span>
        </div>
      </template>
      <p>收货人: {{ row.address.name }}</p>
      <p>联系方式: {{ row.address.phone }}</p>
      <p>
        收货地址:
        {{
            row.address.province +
            row.address.city +
            row.address.district +
            row.address.address
          }}
      </p>
    </el-card>
  </el-drawer>
</div>
</template>

<script>
export default {
  props: {
    drawerData: {
      required: true
    },
    drawer: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    show () {
      return this.drawer
    },
    row () {
      return this.drawerData
    }
  },
  methods: {
    emitValue () {
      this.$emit('child-event', this.show) // 触发自定义事件，并传递数值给父组件
    },
    goodsTitle () {
      return this.row.OrderItems[0]?.goods_item
        ? this.row.OrderItems[0].goods_item.title
        : '商品已被删除'
    },
    goodsTags () {
      if (this.row.OrderItems[0]?.goods_item && this.row.OrderItems[0].goods_skus) {
        return this.row.OrderItems[0].goods_skus.skus
      } else {
        return ''
      }
    },
    goodsTag () {
      const array = []
      for (const key in this.goodsTags()) {
        if (Object.hasOwnProperty.call(this.goodsTags(), key)) {
          const element = this.goodsTags()[key]
          array.push(element)
        }
      }
      return array
    },
    goodsPhoto () {
      return this.row.OrderItems[0]?.goods_item ? this.row.OrderItems[0].goods_item.cover : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    },
    goodsNum () {
      return this.row.OrderItems[0]?.goods_item
        ? this.row.OrderItems[0].num
        : '商品已被删除'
    },
    goodsPrice () {
      return this.row.OrderItems[0]?.goods_item
        ? this.row.OrderItems[0].price
        : ''
    },
    total_price () {
      return this.row.OrderItems[0]?.goods_item
        ? this.row.total_price
        : '商品已被删除'
    }
  }
}
</script>

<style scoped>
.price {
  font-size: 14px;
  color: red;
  font-weight: 600;
}

.el-tag {
  margin-right: 6px;
}

.el-card {
  margin-bottom: 20px;
}

.card-header {
  font-size: 16px;
}

p {
  margin-bottom: 15px;
  font-size: 14px;
}

.layout {
  display: flex;
  align-items: center;
}

.layout .photo {
  width: 67px;
  margin-right: 10px;
  border-radius: 4px;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 80px;
}
</style>
